<template>
 <div class="app-container"  style="background-color:#FAFAFB;">
      
      <el-card class="box-card" shadow="never" style="width:80%;margin-left:100px;margin-top:32px;">
       <!-- <el-button size="small" @click="handelBack">返回</el-button>  -->
       <el-alert v-if="housePrice>0" style="float:right;width:30%;margin-right:5%;margin-top:30px;" title="评估成功" type="success" show-icon>本套房总估价：{{housePrice}} 万元</el-alert>
       <!-- <span v-if="housePrice>0" style="float:right;margin-right:10%;margin-top:30px;color:#67C23A;font-size:15px;"  type="success">评估成功，本套房总估价：{{housePrice}} 元</span> -->
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="right" label-width="130px" style="width: 600px; margin-left:50px;margin-top:30px;">
        
         <el-form-item  label="房产区域" prop="areaId" :rules="{ required: true,message: '请输入房产区域',trigger: 'change'}">
           <el-cascader v-model="regionValues" @change="regionChangeHandle" :options="regionList" clearable  placeholder="请选择区域" :props="{ expandTrigger: 'hover' }" style="width:100%;"></el-cascader>
          
        </el-form-item>
        <el-form-item label="房产详细地址" prop="address" :rules="{ required: true,message: '请输入房产详细地址',trigger: 'blur'}">
          <el-input v-model="dataForm.address" placeholder="请输入房产详细地址（精确到小区门牌号）"></el-input>
          <!-- <el-alert title="完整地址必须包括小区名称" type="info"></el-alert> -->
        </el-form-item>
        <el-form-item label="房产面积" prop="buildArea" :rules="[{ required: true,message: '请输入房产面积',trigger: 'blur'},
        { required: true, pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/, message: '请输入正确的房产面积', trigger: ['blur'] }]">
          <el-input v-model="dataForm.buildArea" placeholder="请输入房产面积"><template slot="append">m²</template></el-input>
        </el-form-item>
       
       
        
       
         <el-form-item>
        <div  v-if="detail === undefined">
           <el-button  type="primary" @click="handelBack()" style="width:150px;height:40px;">取消</el-button>
           <el-button  type="warning" @click="createData()" style="width:150px;height:40px;" v-loading.fullscreen.lock="fullscreenLoading">评估</el-button>
        </div>
      </el-form-item>
      </el-form>
      </el-card>

  </div>
</template>



<script>
import { houseEvaluation } from '@/api/house'
import { listRegion,detailByAreaId } from '@/api/region'
import DicSelect from '@/components/select'

export default {
  name: 'borrower',
  components: { DicSelect },
  // 接受父组件的值
  props: {
     changeValue: undefined,
     projectId: undefined
    }, 
  data() {
    return {
      appointNextTime:undefined,
      updateParam: undefined,
      list: undefined,
      total: 0,
      listLoading: true,
      loading: false,
      projectList: undefined,
      regionList: undefined,
      options:[],
      value:undefined,
      fileList:[],
      borrowerId: undefined,
      regionValues: [],
      stepType: undefined,
      channelId: undefined,
      detail: undefined,
      dataForm: {
        areaId: undefined,
        buildArea: undefined,
        address: undefined,
        provinceId: undefined,
        cityId: undefined
      },
      item: undefined,
      data: [{
      }],
        rules: {
      },
      downloadLoading: false,
      fullscreenLoading: false,
      housePrice: 0
    }
  },
  computed: {
  },
  created() {

    this.getRegionList()
  },
  methods: {
     getRegionList() {
      listRegion()
        .then(response => {
          if(response.data != undefined ) {
            this.regionList = response.data
            
          }
        })
        .catch(() => {
        })
    },
    regionChangeHandle(val){
      console.log(val)
      this.dataForm.areaId = val.lastItem
    },
    handelBack() {
      this.$router.push("/project/index")
    },
    createData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
        this.dataForm.provinceId = this.regionValues[0]
        this.dataForm.cityId = this.regionValues[1]
        const loading = this.$loading({
          lock: true,
          text: '评估中',
          spinner: 'el-icon-loading',
          background: 'rgba(192, 192, 192, 0.7)'
        });
          houseEvaluation(this.dataForm)
            .then(response => {
              loading.close()
              if( response.data == undefined ) {
                this.$notify.error("评估失败")
              }else if(response.data == 0){
                this.$notify.error("评估失败，请检查房产地址是否正确")
              }else{
                this.housePrice = response.data
                this.$notify.success("评估成功")
              }
            
            })
            .catch(response => {
              loading.close()
            })
        }
      })
    },
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 145px;
    height: 145px;
    display: block;
  }
</style>
